require("../../assets/css/normalize.css");
require("../../assets/css/reset.css");
require("../../assets/fonts/iconfont.css");

require("./sports_date.less");
const dom = require("../../utils/dom.js");
const axios = require("axios");
import * as echarts from "echarts";

document.addEventListener("DOMContentLoaded", async function () {
	dom.get(".back").addEventListener("click", function () {
		history.back();
	});
	let token = localStorage.getItem("token");
	axios.defaults.headers.common["Authorization"] = "Bearer " + token;
	let res = await axios.get("http://fitness.h5.itsource.cn:3701/api/exercise");

	let { sum7Calorie, sum7Duration, sum7Meter, days } = res.data.data;

	dom.get("#duration").textContent = parseInt(sum7Duration / 60);
	dom.get("#cal").textContent = sum7Calorie;
	dom.get("#meter").textContent = sum7Meter;
	dom.get("#day1").textContent = days.length;
	dom.get("#day2").textContent = days.length;
	// 图表1

	const myChart = echarts.init(dom.get(".chart1"));
	let a = days.map(function (v) {
		return v.date.slice(5);
	});
	let b = days.map(function (v) {
		return v.sumDuration;
	});

	// 绘制图表
	myChart.setOption({
		title: {
			text: "近7天运动时长",
			left: 10,
			top: 10,
		},
		grid: {
			left: 50,
		},
		xAxis: {
			type: "category",
			data: a,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: b,
				type: "bar",
			},
		],
	});
	//图表1
	let run = 0; //跑步
	let sid = 0; //骑行
	let xun = 0; //训练
	days.map(function (v) {
		return (run += v.exerciseData[0].calorie); //跑步
	});
	days.map(function (v) {
		return (sid += v.exerciseData[1].calorie); //骑行
	});
	days.map(function (v) {
		return (xun += v.exerciseData[2].calorie); //训练
	});

	const myChart2 = echarts.init(dom.get(".chart2"));
	myChart2.setOption({
		title: {
			text: "运动分类",

			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "item",
		},
		legend: {
			orient: "vertical",
			right: 10,
			top: 10,
		},
		series: [
			{
				name: "Access From",
				type: "pie",
				radius: "70%",
				label: {
					position: "inside",
					formatter: "{d}%",
				},
				data: [
					{ value: run, name: "跑步" },
					{ value: sid, name: "骑行" },
					{ value: xun, name: "训练" },
				],
				emphasis: {
					itemStyle: {
						shadowBlur: 10,
						shadowOffsetX: 0,
						shadowColor: "rgba(0, 0, 0, 0.5)",
					},
				},
			},
		],
	});
	//图表2

	let run1 = days.map(function (v) {
		return v.exerciseData[0].calorie; //跑步
	});
	let sid1 = days.map(function (v) {
		return (sid = v.exerciseData[1].calorie); //骑行
	});
	let xun1 = days.map(function (v) {
		return (xun = v.exerciseData[2].calorie); //训练
	});
	//图表3
	const myChart3 = echarts.init(dom.get(".chart3"));
	myChart3.setOption({
		title: {
			text: "近7日运动分类",

			left: 10,
			top: 10,
		},
		tooltip: {
			trigger: "axis",
			axisPointer: {
				// Use axis to trigger tooltip
				type: "shadow", // 'shadow' as default; can also be 'line' or 'shadow'
			},
		},
		legend: {
			top: 33,
			right: 20,
		},
		grid: {
			left: "2%",
			right: "4%",
			bottom: "3%",
			containLabel: true,
		},
		xAxis: {
			type: "value",
		},
		yAxis: {
			type: "category",
			data: a,
		},
		series: [
			{
				name: "跑步",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: run1,
			},
			{
				name: "骑行",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: sid1,
			},
			{
				name: "训练",
				type: "bar",
				stack: "total",
				label: {
					show: true,
				},
				emphasis: {
					focus: "series",
				},
				data: xun1,
			},
		],
	});
	// 次数
	let count = days.map(function (v) {
		return v.count;
	});

	// 图表4
	const myChart4 = echarts.init(dom.get(".chart4"));
	myChart4.setOption({
		title: {
			text: "近7日训练次数",

			left: 10,
			top: 10,
		},
		xAxis: {
			type: "category",
			data: a,
		},
		yAxis: {
			type: "value",
		},
		series: [
			{
				data: count,
				type: "line",
			},
		],
	});
});
